Skip to content

fix: env columns hard to distinguish in compare view#7250

Open
talissoncosta wants to merge 3 commits intomainfrom
fix/compare-env-divider-7249
Open

fix: env columns hard to distinguish in compare view#7250
talissoncosta wants to merge 3 commits intomainfrom
fix/compare-env-divider-7249

Conversation

@talissoncosta
Copy link
Copy Markdown
Contributor

@talissoncosta talissoncosta commented Apr 15, 2026

  • I have read the Contributing Guide.
  • I have added information to `docs/` if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Closes #7249

In the environment comparison view, the segment override icon (pie icon) sat flush against the next environment's column, making it hard to visually separate where one environment ends and the next begins.

This PR adds a left border and small padding to the right environment column (both header and rows) so the boundary between environments is clear.

image

How did you test this code?

  1. Open a project with multiple environments and segment overrides on at least one feature
  2. Navigate to `/project/{id}/compare`
  3. Select two environments
  4. Confirm there is now a visible vertical divider between the left and right environment columns
  5. Confirm the segment override icon no longer sits flush against the next column

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 15, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Apr 16, 2026 5:05pm
flagsmith-frontend-staging Ready Ready Preview, Comment Apr 16, 2026 5:05pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Apr 16, 2026 5:05pm

Request Review

talissoncosta and others added 2 commits April 16, 2026 13:48
Adds a left border and padding to the right environment column (header
and rows) so the segment override icon no longer sits flush against the
next column.

Closes #7249

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The segment and identity override icons were rendered after the value,
which placed them at the right edge of the column — visually colliding
with the next environment in the comparison view.

Move them to before the value (next to the toggle) so they belong with
the env-specific controls and stay clear of column boundaries.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace bare text with the EmptyState component — consistent
with the pattern used across charts and other empty states.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.

Once credits are available, reopen this pull request to trigger a review.

@github-actions github-actions bot added fix and removed fix labels Apr 16, 2026
@talissoncosta talissoncosta changed the title fix: Add visual divider between environment columns in comparison view fix: Environment columns hard to distinguish in compare view (#7249) Apr 16, 2026
@talissoncosta talissoncosta changed the title fix: Environment columns hard to distinguish in compare view (#7249) fix: add visual divider between environment columns in comparison view Apr 16, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 16, 2026

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-7250 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-7250 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7250 Finished ✅ Results
ghcr.io/flagsmith/flagsmith:pr-7250 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7250 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-frontend:pr-7250 Finished ✅ Results

@talissoncosta talissoncosta changed the title fix: add visual divider between environment columns in comparison view fix: env columns hard to distinguish in compare view Apr 16, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 16, 2026

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  9.1 seconds
commit  b23119d
info  🔄 Run: #16133 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  52.3 seconds
commit  b23119d
info  🔄 Run: #16133 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  17 passed

Details

stats  17 tests across 14 suites
duration  1 minute, 3 seconds
commit  b23119d
info  🔄 Run: #16133 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  1 minute, 6 seconds
commit  b23119d
info  🔄 Run: #16133 (attempt 1)

@github-actions
Copy link
Copy Markdown
Contributor

Visual Regression

16 screenshots compared. See report for details.
View full report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI: Add visual divider between environment columns in comparison view

1 participant